<template>
  <PageWrapper contentFullHeight fixedHeight>
    <VxeBasicTable class="w-full h-full" ref="tableRef" v-bind="gridOptions">
      <template #action="{ row }">
        <a-button type="link" size="small" @click="handleView(row)">
          <template #icon><Icon icon="carbon:view" /></template>
        </a-button>
      </template>
    </VxeBasicTable>
    <DetailsModal @register="registerModal" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { searchFormSchema, columns } from './schemas.data.ts';
import { getWarningRainfallApi } from "@/api/warningInfo/baseData";
import { PageWrapper, BasicTableProps, useModal } from '@gui-pkg/antdcomponents';
import { VxeBasicTable, VxeGridInstance } from '@gui-pkg/antdcomponents';
defineOptions({ name: 'RiverWarnPage' });

const [registerModal, { openModal }] = useModal();
const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  id: tableRef.value,
  columns: columns,
  toolbarConfig: null,
  height: 'auto',
  formConfig: {
    enabled: true,
    className: "vxe-formConfig",
    items: searchFormSchema,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page, form }) => {
        const tableListData = await getWarningRainfallApi({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...form,
          warnType:2,
          beginTime:form.warnTime==null?"":form.warnTime[0],
          endTime:form.warnTime==null?"":form.warnTime[1],
        });
        console.log('tableListData',tableListData);
        return { list: tableListData.records,total: tableListData.total};
      },
    },
  },
});
</script>


